@import 'config';
.shopcart{
  // display:none;
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  z-index: 50;
  width: 100%;
  .content{
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: 100%;
    background-color: $white;
    &.fold-enter, &.fold-leave-active{
      transform: translate3d(0, 0, 0);
    }
    .hd{
      height: px2rem(40px);
      padding: 0 px2rem(10px);
      border: px2rem(1px) solid darken($light, 3%);
      background-color: $light;
      display: flex;
      align-items:center;
      .title{
        flex:1;
        font-size: px2rem(14px);
        color: $auxiliary;
      }
      .empty{
        font-size:  px2rem(12px);
        color: $dark;
      }
    }
    .bd{
      position: relative;
      padding: 0 px2rem(10px);
      min-height: px2rem(50px);
      .scroll{
        position: relative;
        max-height: px2rem(200px);
        overflow: hidden;
      }
    }
    .ft{
      font-size: px2rem(14px);
      padding: px2rem(16px)  px2rem(10px);
      display: flex;
      align-items: center;
      .total{
        flex: 1;
      }
      .btn-red {
        height: px2rem(16px);
        padding: px2rem(8px) px2rem(20px);
        color: $white;
        font-size: px2rem(16px);
        background-color: $red;
        border-radius: px2rem(16px);
      }
    }
  }
  .item{
    display: flex;
    padding: px2rem(10px) 0;
    box-sizing: border-box;
    align-items: center;
    @include border-1px();
    .name{
      flex: 1;
      font-size: px2rem(14px);
      color: $darker;
    }
    .price{
      font-size: px2rem(14px);
      color: $darker;
    }
  }
  .carcontrol-wrapper{
    flex: px2rem(80px) 0 0 0;
    width: px2rem(80px);
    text-align: right;
    display: flex;
    justify-content: flex-end;
  }
  .mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
    opacity: 1;
    backdrop-filter: blur(px2rem(5px));
    background: rgba($black, .5);
    &.fade-enter, &.fade-leave-active{
      opacity: 0;
      background: rgba($black, 0);
    }
  }
  .disfree{
    display: inline-block;
    height: px2rem(16px);
    line-height: px2rem(16px);
    padding: px2rem(8px) px2rem(20px);
    background-color: $dark;
    font-size: px2rem(12px);
    color: $white;
    border-radius: px2rem(16px);
  }
}